<template>
	<view class="coreshop-bg-white">
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar :title="title" safeAreaInsetTop fixed placeholder @leftClick="goNavigateBack"></u-navbar>

		<!-- 条件筛选 -->
		<u-sticky :offset-top="statusBar" customNavHeight="44">
			<view class="coreshop-justify-center coreshop-bg-white">
				<fy-dropdown :menuList="menuList" ref="uDropdown">
					<fy-dropdown-item v-model="comprehensiveDataValue" dropdownKey="synthesis" title="综合"
						:options="comprehensiveData" @change="comprehensive"></fy-dropdown-item>
					<fy-dropdown-item v-model="priceSortDataValue" dropdownKey="price" title="价格"
						:options="priceSortData" @change="priceSort"></fy-dropdown-item>
					<fy-dropdown-item v-model="salesVolumeDataValue" dropdownKey="sales" title="销量"
						:options="salesVolumeData" @change="salesVolume"></fy-dropdown-item>
					<fy-dropdown-item title="其他" dropdownKey="other" :custom="true">
						<view class="slot-content coreshop-bg-white">
							<view class="fliter-c coreshop-padding-10">
								<view class="fliter-item">
									<view class="fliter-item-title">
										<view class="fliter-item-title-hd">
											<view class="fliter-item-title-hd-title">价格区间</view>
										</view>
									</view>
									<view class="fliter-i-c coreshop-flex-direction-row">
										<view class="fic-item"><input class="fic-item-input" type="number"
												v-model="sPrice" /></view>
										<view class="fic-item-line"></view>
										<view class="fic-item"><input class="fic-item-input" type="number"
												v-model="ePrice" /></view>
									</view>
								</view>
								<view class="fliter-item" v-if="catList.length > 0">
									<view class="fliter-item-title">
										<view class="fliter-item-title-hd">
											<view class="fliter-item-title-hd-title">分类</view>
										</view>
									</view>
									<view class="fliter-i-c coreshop-flex-direction-row">
										<view v-for="item in catList" :key="item.goodsCatId"
											v-if="item.goodsCatId && item.name"
											@click="selectKey('catList', item.goodsCatId)">
											<view class="fic-item" v-if="!item.isSelect">
												<view class="fic-item-text two-line">{{ item.name }}</view>
											</view>
											<view class="fic-item fic-item-active" v-else-if="item.isSelect">
												<view class="fic-item-text two-line">{{ item.name }}</view>
											</view>
										</view>
									</view>
								</view>
								<view class="fliter-item" v-if="brandList.length > 0">
									<view class="fliter-item-title">
										<view class="fliter-item-title-hd">
											<view class="fliter-item-title-hd-title">品牌</view>
										</view>
									</view>
									<view class="fliter-i-c coreshop-flex-direction-row">
										<scroll-view style="max-height: 300px;" :scroll-top="scrollTop" scroll-y="true"
											class="scroll-Y" show-scrollbar="true">
											<view v-for="item in brandList" :key="item.id" v-if="item.id && item.name"
												@click="selectKey('brandList', item.id)">
												<view class="fic-item" v-if="!item.isSelect">
													<view class="fic-item-text two-line">{{ item.name }}</view>
												</view>
												<view class="fic-item fic-item-active" v-if="item.isSelect">
													<view class="fic-item-text two-line">{{ item.name }}</view>
												</view>
											</view>
										</scroll-view>
									</view>
								</view>
								<view class="fliter-item" v-if="labelList.length > 0">
									<view class="fliter-item-title">
										<view class="fliter-item-title-hd">
											<view class="fliter-item-title-hd-title">标签</view>
										</view>
									</view>
									<view class="fliter-i-c coreshop-flex-direction-row">
										<view v-for="item in labelList" :key="item.id" v-if="item.id && item.name"
											@click="selectKey('labelList', item.id)">
											<view class="fic-item" v-if="!item.isSelect">
												<view class="fic-item-text two-line">{{ item.name }}</view>
											</view>
											<view class="fic-item fic-item-active" v-else-if="item.isSelect">
												<view class="fic-item-text two-line">{{ item.name }}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="coreshop-category-bottomBox">
								<view>
									<u-button size="medium" @click="filterNo()">取消</u-button>
								</view>
								<view>
									<u-button size="medium" type="primary" @click="filterOk()">确定</u-button>
								</view>
							</view>
						</view>
					</fy-dropdown-item>
				</fy-dropdown>
			</view>
		</u-sticky>

		<view class="coreshop-margin-left-10 coreshop-margin-right-10 index-goods coreshop-margin-top-10"
			v-if="goodsList.length > 0">
			<view class="flex-box clear-fix">
				<view class="coreshop-padding-bottom-10 coreshop-bg-main column-value2"
					v-for="(item,index) in goodsList" :key="index">
					<view
						class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18"
						@click="goGoodsDetail(item.id)">
						<image :lazy-load="true" :src="item.image" class="img" mode="widthFix"></image>
						<view class="coreshop-multiple-line-clamp">
							<text class="coreshop-font-14">{{item.name}}</text>
						</view>
						<view
							class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
							<view class="coreshop-text-red coreshop-font-weight-bold">
								<text class="coreshop-font-12">¥</text>
								<text class="coreshop-font-16">{{item.price}}</text>
								<span
									class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
							</view>
							<view>
								<text
									class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
							</view>
						</view>
						<view class="coreshop-divider"
							v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
							<view class="complete"></view>
						</view>
						<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5"
							:class="newData.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'"
							v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
							<view>
								{{ pointShowName}}兑换价:
							</view>
							<view class="coreshop-text-red">
								{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}
								元
							</view>
						</view>
						<view
							class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5"
							v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
							<view>
								购买赠送:
							</view>
							<view class="coreshop-text-red">
								{{item.points}}{{ pointShowName}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<u-loadmore :status="loadStatus" :icon-type="loadIconType" :load-text="loadText" margin-top="20"
				margin-bottom="20" />
		</view>
		<!-- 无数据时默认显示 -->
		<view class="coreshop-emptybox" v-else>
			<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="当前列表为空"
				mode="list"></u-empty>
		</view>
		<u-back-top :scroll-top="scrollTop" :duration="300"></u-back-top>
		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '列表',
				id: '',
				showView: false,
				goodsList: [],
				minPrice: '',
				maxPrice: '',

				scrollTop: 0,

				loadStatus: 'loadmore',
				loadIconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},

				toView: '',
				searchData: {
					where: {},
					limit: 10,
					page: 1,
					order: {
						key: 'sort',
						sort: 'asc'
					}
				},
				searchKey: '请输入关键字搜索', //关键词
				alllist: true,
				allgrid: false,
				screents: true,
				screentc: false,
				sPrice: '',
				ePrice: '',
				brandList: [],
				catList: [],
				labelList: [],

				menuList: [{
					title: '综合',
					dropdownKey: 'synthesis'
				}, {
					title: '价格',
					dropdownKey: 'price'
				}, {
					title: '销量',
					dropdownKey: 'sales'
				}, {
					title: '其他',
					dropdownKey: 'other'
				}],
				comprehensiveDataValue: 'asc',
				priceSortDataValue: '',
				salesVolumeDataValue: 1,
				comprehensiveData: [{
						label: '顺序',
						value: 'asc',
					},
					{
						label: '倒序',
						value: 'desc',
					}
				],
				salesVolumeData: [{
						label: '从小到大',
						value: 'asc',
					},
					{
						label: '从大到小',
						value: 'desc',
					}
				],
				priceSortData: [{
						label: '从小到大',
						value: 'asc',
					},
					{
						label: '从大到小',
						value: 'desc',
					}
				],
				statusBar: 0, //状态栏高度
				customBar: 0, // 状态栏高度 + 导航栏高度  
				navbar: 0, // 自定义标题与胶囊对齐高度
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//加载执行
		onLoad: function(options) {
			uni.getSystemInfo({
				success: (e) => {
					// #ifdef MP
					this.statusBar = e.statusBarHeight
					this.customBar = e.statusBarHeight + 45
					if (e.platform === 'android') {
						this.$store.commit('SET_SYSTEM_IOSANDROID', false)
						this.customBar = e.statusBarHeight + 50
					}
					// #endif

					// #ifdef MP-WEIXIN
					this.statusBar = e.statusBarHeight
					const custom = wx.getMenuButtonBoundingClientRect()
					this.customBar = custom.bottom + custom.top - e.statusBarHeight

					this.navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
					// #endif

					// #ifdef MP-ALIPAY
					this.statusBar = e.statusBarHeight
					this.customBar = e.statusBarHeight + e.titleBarHeight
					// #endif

					// #ifdef APP-PLUS
					console.log('app-plus', e)
					this.statusBar = e.statusBarHeight
					this.customBar = e.statusBarHeight + 45
					// #endif
				}
			})

			var where = {};
			if (options.id) {
				where.catId = options.id;
			}
			if (options.key) {
				where = {
					searchName: options.key
				};
				this.searchKey = options.key;
			}
			if (options.type) {
				if (options.type == 'hot') {
					where = {
						hot: true
					};
				}
				if (options.type == 'recommend') {
					where = {
						recommend: true
					};
				}
			}
			if (options.catId) {
				where.catId = options.catId;
			}
			if (options.brandId) {
				where.brandId = options.brandId;
			}
			if (options.hot) {
				where.hot = options.hot;
			}
			if (options.recommend) {
				where.recommend = options.recommend;
			}
			if (options.labelId) {
				where.labelId = options.labelId;
			}
			this.searchData.where = where;
			//this.setSearchData({
			//    where: where
			//});
			this.setSearchData(this.searchData, true);
			this.getGoods();
			//    this.$refs.waterfallsFlowRef.refresh();
		},
		onReachBottom() {
			if (this.loadStatus != 'nomore') {
				this.getGoods();
			}
		},
		computed: {
			pointSwitch() {
				return this.$store.state.config.pointSwitch
			},
			pointShowExchangePrice() {
				return this.$store.state.config.pointShowExchangePrice
			},
			pointDiscountedProportion() {
				return this.$store.state.config.pointDiscountedProportion
			},
			pointExchangeModel() {
				return this.$store.state.config.pointExchangeModel
			},
			pointShowName() {
				return this.$store.state.config.pointShowName
			},
			pointGetModel() {
				return this.$store.state.config.pointGetModel
			},
			pointShowPoint() {
				return this.$store.state.config.pointShowPoint
			},
		},
		methods: {
			wapperClick(item) {
				this.goGoodsDetail(item.id)
			},
			imageClick(item) {
				this.goGoodsDetail(item.id)
			},
			//设置查询条件
			setSearchData: function(searchData, clear = false) {
				// 深度克隆
				this.searchData = this.$u.deepClone(searchData);

				if (clear) {
					this.goodsList = [];
				}
			},
			onChangeShowState: function() {
				var _this = this;
				_this.showView = !_this.showView;
			},
			//点击综合排序
			comprehensive: function(value) {
				if (value) {
					this.searchData.order = {
						key: 'sort',
						sort: value
					};
					this.searchData.page = 1; //从第一页重新显示
					this.setSearchData(this.searchData, true);
					this.getGoods();
				}
			},
			//销量
			salesVolume: function(value) {
				this.priceSortDataValue = '';
				this.searchData.order = {
					key: 'buyCount',
					sort: value
				};
				this.searchData.page = 1; //从第一页重新显示
				this.setSearchData(this.searchData, true);
				this.getGoods();
			},
			//价格排序
			priceSort: function(value) {
				this.salesVolumeDataValue = '';
				this.searchData.order = {
					key: 'price',
					sort: value
				};
				this.searchData.page = 1; //从第一页重新显示
				this.setSearchData(this.searchData, true);
				this.getGoods();
			},
			//设置查询价格区间
			// 		orderPrice: function(e) {
			// 			var reg = /^[0-9]+(.[0-9]{2})?$/;
			// 			if (!reg.test(e.detail.value)) {
			// 				this.$u.toast('请输入正确金额');
			// 				this.maxPrice = '';
			// 			} else {
			// 				this.maxPrice = e.detail.value;
			// 			}
			// 		},
			//查询价格区间
			// 		searchPrice: function(event) {
			// 			if (
			// 				this.minPrice > 0 &&
			// 				this.maxPrice > 0 &&
			// 				this.minPrice > this.maxPrice
			// 			) {
			// 				app.common.errorToShow('价格区间有误');
			// 				return false;
			// 			}
			//
			// 			this.setSearchData(
			// 				{
			// 					page: 1,
			// 					where: {
			// 						priceFrom: this.minPrice,
			// 						priceTo: this.maxPrice
			// 					}
			// 				},
			// 				true
			// 			);
			// 			this.getGoods();
			// 		},
			//取得商品数据
			getGoods: function() {
				var _this = this;

				_this.$u.api.goodsList(_this.conditions()).then(res => {
					if (res.status) {
						if (res.data.className != '') {
							_this.title = res.data.className;
						} else {
							if (res.data.where && res.data.where.searchName && res.data.where.searchName !=
								'') {
								_this.title = "商品搜索";
							}
						}
						//_this.goodsList = _this.goodsList.concat(res.data.list);


						let _list = res.data.list;
						_this.goodsList = [..._this.goodsList, ..._list]


						if (res.data.brands) {
							for (let i = 0; i < res.data.brands.length; i++) {
								res.data.brands[i].isSelect = false;
							}
							_this.brandList = res.data.brands;
						}

						if (res.data.filter) {
							if (filter.goodsCat) {
								for (let i = 0; i < filter.goodsCat.length; i++) {
									filter.goodsCat[i].isSelect = false;
								}
								_this.catList = filter.goodsCat;
							}
							if (filter.labelIds) {
								for (let i = 0; i < filter.labelIds.length; i++) {
									filter.labelIds[i].isSelect = false;
								}
								_this.labelList = filter.labelIds;
							}
						}
						if (res.data.totalPages > _this.searchData.page) {
							_this.loadStatus = 'loadmore';
							_this.searchData.page++;
						} else {
							// 数据已加载完毕
							_this.loadStatus = 'nomore';
						}

					}
				});
			},
			//上拉加载
			lower: function() {
				var _this = this;
				_this.toView = 'loading';

				if (!_this.loadingComplete) {
					_this.setSearchData({
						page: _this.searchData.page + 1
					});
					_this.getGoods();
				}
			},
			listgrid: function() {
				let _this = this;
				if (_this.alllist) {
					_this.allgrid = true;
					_this.listgrid = true;
					_this.alllist = false;
				} else {
					_this.allgrid = false;
					_this.listgrid = false;
					_this.alllist = true;
				}
			},
			// 统一返回筛选条件 查询条件 分页
			conditions() {
				let data = this.searchData;
				var newData = this.$u.deepClone(data);
				if (data.where) {
					newData.where = JSON.stringify(data.where);
				}
				//把排序换成字符串
				if (data.order) {
					var sort = data.order.key + ' ' + data.order.sort;
					if (data.order.key != 'sort') {
						sort = sort + ',sort asc'; //如果不是综合排序，增加上第二个排序优先级排序
					}
					newData.order = sort;
				} else {
					newData.order = 'sort asc';
				}
				return newData;
			},
			//老搜索
			search() {
				this.setSearchData({
						page: 1,
						where: {
							searchName: this.keyword
						}
					},
					true
				);
				this.getGoods();
			},
			//去搜索
			goSearch() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				// #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE || MP-TOUTIAO
				if (prevPage && prevPage.route) {
					let search_flag = prevPage.route;
					if (search_flag == 'pages/search/search') {
						uni.navigateBack({
							delta: 1
						});
					} else {
						this.$u.route('/pages/search/search');
					}
				} else {
					this.$u.route('/pages/search/search');
				}
				// #endif

				// #ifdef MP-ALIPAY
				if (prevPage && prevPage.__proto__.route) {
					let search_flag = prevPage.__proto__.route;
					if (search_flag == 'pages/search/search') {
						uni.navigateBack({
							delta: 1
						});
					} else {
						this.$u.route('/pages/search/search');
					}
				} else {
					this.$u.route('/pages/search/search');
				}
				// #endif
			},
			//取消筛选
			filterNo() {
				this.ePrice = '';
				this.sPrice = '';
				for (let i = 0; i < this.catList.length; i++) {
					this.catList[i].isSelect = false;
				}
				for (let i = 0; i < this.brandList.length; i++) {
					this.brandList[i].isSelect = false;
				}
				for (let i = 0; i < this.labelList.length; i++) {
					this.labelList[i].isSelect = false;
				}
				this.filterOk();
				//this.toclose();
			},
			//确认筛选
			filterOk() {
				let data = this.searchData;

				//获取分类
				// data.where.catId = '';
				for (let i = 0; i < this.catList.length; i++) {
					if (this.catList[i].isSelect) {
						data.where.catId = this.catList[i].goodsCatId;
					}
				}

				//获取多个品牌
				let brandIds = '';
				for (let i = 0; i < this.brandList.length; i++) {
					if (this.brandList[i].isSelect) {
						brandIds += this.brandList[i].id + ',';
					}
				}
				if (brandIds) {
					brandIds = brandIds.substr(0, brandIds.length - 1);
				}
				data.where.brandId = brandIds;

				//获取标签
				data.where.labelId = '';
				for (let i = 0; i < this.labelList.length; i++) {
					if (this.labelList[i].isSelect) {
						data.where.labelId = this.labelList[i].id;
					}
				}

				//价格区间
				data.where.priceFrom = '';
				data.where.priceTo = '';
				if (
					this.sPrice * 1 < 0 ||
					(this.ePrice != '' && this.ePrice <= 0) ||
					this.ePrice * 1 < 0 ||
					(this.sPrice * 1 > this.ePrice * 1 && this.sPrice != '' && this.ePrice != '')
				) {
					this.$u.toast('价格区间有误');
					return false;
				} else {
					data.where.priceFrom = this.sPrice;
					data.where.priceTo = this.ePrice;
				}
				this.searchData.page = 1; //从第一页重新显示
				this.setSearchData(data, true);
				this.getGoods();
				this.closeDropdown();
			},
			//选择
			selectKey(type, id) {
				//分类一次只能选择一个
				if (type == 'catList') {
					for (let i = 0; i < this.catList.length; i++) {
						if (this.catList[i].goodsCatId == id) {
							this.catList[i].isSelect = this.catList[i].isSelect ? false : true;
						} else {
							this.catList[i].isSelect = false;
						}
					}
				}
				if (type == 'brandList') {
					for (let i = 0; i < this.brandList.length; i++) {
						if (this.brandList[i].id == id) {
							this.brandList[i].isSelect = this.brandList[i].isSelect ? false : true;
						} else {
							this.brandList[i].isSelect = false;
						}
					}
				}
				if (type == 'labelList') {
					for (let i = 0; i < this.labelList.length; i++) {
						if (this.labelList[i].id == id) {
							this.labelList[i].isSelect = this.labelList[i].isSelect ? false : true;
						} else {
							this.labelList[i].isSelect = false;
						}
					}
				}
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			}
		},
		// #ifdef MP-ALIPAY
		onChangeShowState_show: function() {
			var that = this;
			that.setData({
				showView: (that.showView = true)
			});
		},
		onChangeShowState_hid: function() {
			var that = this;
			that.setData({
				showView: (that.showView = false)
			});
		}
		// #endif
	};
</script>

<style scoped lang="scss">
	.flex-box {
		column-count: 2;
		column-gap: 8px;

		.column-value2 {
			width: 100%;
			break-inside: avoid;
			color: #333333 !important;
			margin-bottom: 8px;
		}
	}

	.flex-box3 {
		column-count: 3;
		column-gap: 8px;

		.column-value3 {
			width: 100%;
			break-inside: avoid;
			color: #333333 !important;
			margin-bottom: 5px;
		}
	}

	.img {
		width: 100%;
	}

	.clear-fix::after {
		content: '';
		display: block;
		height: 0;
		clear: both;
	}

	.clear-fix {
		zoom: 1;
	}

	@import "list.scss";
</style>
